<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../../dist/vue.min.js"></script>
</head>

<!--ESLint: please specify Node.js interpreter需要Node.js解释器？？？-->
<body>
<!-- #4510 click and change event on checkbox -->
<!--模版一。-->
<div id="case-1">
    <div @click="num++"><!--自己会增加，如果单机了。?-->
        <!--@click是什么？？单击事件？？？？【不是v-on？？？】-->
        {{ num }}
        <input type="checkbox" v-model="checked">
        <!--v-model是什么？？？-->
        <!--这个是一个变量？？？【？赋予初值。data里面。】-->
    </div>
</div>

<script>
    var vm1 = new Vue({
        el: '#case-1',
        data: {
            num: 1,
            checked: false
        }
        /*方法加载指定区域。*/
    })
</script>
<!--

    &lt;!&ndash; #6566 click event bubbling &ndash;&gt;
    <div id="case-2">
      <div class="panel" v-if="expand">
        <button @click="expand = false, countA++">Expand is True</button>
      </div>
      <div class="header" v-if="!expand" @click="expand = true, countB++">
        <button>Expand is False</button>
      </div>
      <div class="count-a">
        countA: {{countA}}
      </div>
      <div class="count-b">
        countB: {{countB}}
      </div>
    </div>
    <script>
    var vm2 = new Vue({
      el: '#case-2',
      data: {
        expand: true,
        countA: 0,
        countB: 0,
      }
    })
    </script>
-->
</body>
</html>
